<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 阴影： box-shadow:  h-shadow v-shadow blur spread color inset  */
        /* h-shadow为水平阴影距离，可为负值            必须有*/
        /* v-shadow为垂直阴影距离，可为负值            必须有 */
        /* blur为模糊距离                                                可选*/
        /* spread为模糊的尺寸                                        可选*/
        /* color颜色                                                        可选*/
        /* inset  是内部阴影，  默认为outset外部阴影,不用写outset     可选 */


        /* 盒子阴影不占用盒子空间 */

        div {
            width: 200px;
            height: 150px;
            background-color: #24f30065;
            /* box-shadow: 4px 6px 10px 5px rgba(0, 0, 0, 0.5) */
        }

        div:hover {
            /* 经过盒子时有阴影 */
            box-shadow:2px 4px 10px 2px rgba(0, 0, 0, .2) ;
        }
    </style>
</head>

<body>
    <div></div>

</body>

</html>